@extends('backend::layout')

@section('title', '评测列表')

@section('content')
    <div class="card border-no">
        <div class="card-body">
            <div class="col-lg-12 col-sm-12 col-xs-12" id="chart"></div>

            @if(!empty($currentAdmin) && $currentAdmin->allow('assessment/add'))
            <div class="row">
                <div class="clearfix"></div>
                <div class="col-md-12 col-sm-12 col-xs-12 pull-right">
                    <p>
                        <a href="{{ route('admin.assessment.add', ['child_id'=>$child->id]) }}" class="btn btn-primary btn-sm">添加评测</a>
                    </p>
                </div>
            </div>
            @endif
            <h4 class="text-black f-20">评测列表-{{ $child->name }}</h4>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">{{ __('评测工具/量表') }}</th>
                        <th scope="col">{{ __('生理年龄') }}</th>
                        <th scope="col">{{ __('评估发展年龄') }}</th>
                        <th scope="col">{{ __('评测时间') }}</th>
                        <th scope="col">{{ __('评测阶段') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if(isset($list))
                        @foreach($list as $idx => $item)
                            <tr>
                                <th scope="row">{{ $idx + 1 }}</th>
                                <td>{{ !empty($item->tool) ? $item->tool->name : $item->tool_id }}</td>
                                <td>{{ $item->age }}</td>
                                <td>{{ $item->agedevelop }}</td>
                                <td>{{ $item->assess_time }}</td>
                                <td>{{ $stage[$item->stage] }}</td>
                                <td>
                                    @if( $currentAdmin->allow('assessment/view'))
                                        <a href="{{ route('admin.assessment.view', ['id' => $item->id]) }}" class="text-primary" title="{{ __('View') }}">&nbsp;&nbsp;<i class="fa fa-eye"></i></a>
                                    @endif
                                    @if( $currentAdmin->allow('assessment/edit'))
                                        <a href="{{ route('admin.assessment.edit', ['id' => $item->id]) }}" class="text-info" title="{{ __('Edit') }}">&nbsp;&nbsp;<i class="fa fa-pencil"></i></a>
                                    @endif
                                    @if($currentAdmin->allow('assessment/delete'))
                                        <a href="{{ route('admin.assessment.delete', ['id' => $item->id]) }}" class="text-danger confirm-delete" title="{{ __('Delete') }}">&nbsp;&nbsp;<i class="fa fa-trash-o"></i></a>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    @endif
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="clearfix"></div>
                <div class="col-md-12 col-sm-12 col-xs-12 pull-right">
                    @if(isset($list))
                        {{ $list->links() }}
                    @endif
                </div>
            </div>
        </div>
    </div>
@stop

@section('script')
    <script>

        function createConfig(data, title) {
            var timeFormat = 'MM/DD/YYYY HH:mm';
            console.log("createconfig")

            console.log(data)
            return {
                type: 'line',
                data: {
                    datasets: data
                },
                options: {
                    title: {
                        display:true,
                        text: title
                    },
                    scales: {
                        xAxes: [{
                            type: 'time',
                            time: {
                                parser: timeFormat,
                                // round: 'day'
                                tooltipFormat: 'll HH:mm'
                            },
                            scaleLabel: {
                                display: true,
                                labelString: '评估时间'
                            }
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: '评估值'
                            }
                        }]
                    },
                }
            };
        }

        $("document").ready(function(){
            var container = document.querySelector('#chart');

            $.get('{{route("admin.assessment.ajaxdata",['child_id'=>$child->id])}}', function (data) {
                var colorNames = Object.keys(window.chartColors);

                console.log(colorNames);

                if (data.status == 200){
                    console.log(data.data);
                    var result = data.data;
                    var colorNum = 0;

                    $.each(result,function(i,val){
                        var age = {};

                        var colorName = colorNames[colorNum % colorNames.length];
                        colorNum++;


                        age.borderColor =  window.chartColors[colorName];
                        age.backgroundColor = window.chartColors[colorName];
                        age.fill = false;
                        age.label = val.age.label;
                        age.data = val.age.data;

                        var agedevelop = {};
                        var colorName = colorNames[colorNum % colorNames.length];
                        colorNum++;

                        agedevelop.borderColor =  window.chartColors[colorName];
                        agedevelop.backgroundColor = window.chartColors[colorName];
                        agedevelop.fill = false;
                        agedevelop.label = val.agedevelop.label;
                        agedevelop.data = val.agedevelop.data;

                        //console.log();
                        var thisconfig = createConfig([age, agedevelop], val.name);

                        console.log('colorNum:' + 'line-chart'+i);
                        console.log(thisconfig);

                        var div = document.createElement('div');
                        div.classList.add('info-box');

                        var canvas = document.createElement('canvas');
                        div.appendChild(canvas);
                        container.appendChild(div);

                        var ctx = canvas.getContext('2d');
                        var chart = new Chart(ctx, thisconfig);

                    })
                }

            })


        })
    </script>
@stop